<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>Title</title>
</head>
<body>
<script src="responsive.js" type="module"></script>
<script type="module">
  import {reactive, effect} from './responsive.js'

  const obj = {
    foo: 1,
  }
  const ITERATE_KEY = Symbol()

  const p = reactive(obj, ITERATE_KEY)

  effect(() => {
    console.log('foo' in p)
  })
  effect(() => {
    for (const key in p) {
      console.log(key)
    }
  })

  p.bar = 2
  p.foo++

</script>
</body>
</html>
